<template>
  <div>
    <h3>人员简介</h3>
    <!-- 向子组件传值并接受子组件返回的事件和参数 -->
    <SonCode
      v-for="item in message"
      :key="item.id"
      :msg="item"
      @addPull="addPull"
    ></SonCode>
  </div>
</template>

<script>
// 引入子组件
import SonCode from './SonCode/SonCode.vue'

export default {
  components: {
    SonCode,
  },
  data() {
    return {
      message: [
        {
          id: '1',
          uname: 'harry',
          famliyName: 'despot',
          age: 28,
          profess: '前端',
        },
        {
          id: '2',
          uname: '志豪',
          famliyName: '陈',
          age: 17,
          profess: '测试',
        },
        {
          id: '3',
          uname: '嘉',
          famliyName: '高',
          age: 21,
          profess: '全栈',
        },
        {
          id: '4',
          uname: '涵翔',
          famliyName: '侯',
          age: 18,
          profess: '帕勒马斯',
        },
      ],
    }
  },
  methods: {
    addPull(id,num) {
      this.message.forEach(item=>item.id === id && (item.age += num))
    },
  },
}
</script>

<style></style>
